<template>
  <div class="xcx">
    <Top></Top>
    <div class="banner">
      <img src="../assets/xcxban.png" />
    </div>
    <div class="Development">
      <div class="hpap" v-for="hpap in pment" :key="hpap.id">
        <p>{{hpap.h}}</p>
        <p>{{hpap.hs}}</p>
        <div>
          <img :src="hpap.img" />
        </div>
      </div>
    </div>
    <div class="zhid">
      <div class="zdpap">
        <p>小程序制定</p>
        <p>专业技术团队，打造小程序开发品牌</p>
        <div class="bdxcx">
          <dl v-for="zdpp in xcxzd" :key="zdpp.id">
            <dt>
              <img :src="zdpp.img" />
            </dt>
            <dd class="da">{{zdpp.bd}}</dd>
            <dd>{{zdpp.tss}}</dd>
          </dl>
        </div>
      </div>
    </div>

    <div class="cxclass">
      <p>程序类</p>
      <p>专业技术团队，打造小程序开发品牌</p>
      <div class="dianji">
        <ul >
          <li v-for="dian in ji" :key="dian.id" @click="dianji(dian.ck)">
            <p  :class="ck==dian.ck?'xax':''">{{dian.qyp}}</p>
          </li>
        </ul>
        <div class="imgs">
          <div class="plaimg" v-for="lf in qypp" :key="lf.id"  v-show="ck==lf.ck">
            <div class="left">
              <img :src="lf.img" />
            </div>
            <div class="right">
              <p class="bt">{{lf.bt}}</p>
              <p class="bts">{{lf.bts}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <Bott></Bott>
  </div>
</template>
<script>
import Top from "@/components/top.vue";
import Bott from "@/components/bott.vue";
export default {
  components: { Top, Bott },
  data() {
    return {
      ck: 1,
      pment: [
        {
          h: "开发流程",
          hs: "专业技术团队，打造小程序开发品牌",
          img: require("../assets/kimg.png")
        }
      ],
      xcxzd: [
        {
          xid: 1,
          img: require("../assets/d1.png"),
          bd: "百度小程序",
          tss:
            "人与万物的开放生态，依托全域流量，通过百度AI开放式赋能，精准连接用户，无需下载安装便可亨受指挥超前的使用体验。"
        },
        {
          xid: 2,
          img: require("../assets/d2.png"),
          bd: "微信小程序",
          tss:
            "人与万物的开放生态，依托全域流量，通过百度AI开放式赋能，精准连接用户，无需下载安装便可亨受指挥超前的使用体验。"
        },
        {
          xid: 3,
          img: require("../assets/d3.png"),
          bd: "支付宝小程序",
          tss:
            "人与万物的开放生态，依托全域流量，通过百度AI开放式赋能，精准连接用户，无需下载安装便可亨受指挥超前的使用体验。"
        }
      ],
      ji: [
        {
          ck: 1,
          qyp: "企业品牌"
        },
        {
          ck: 2,
          qyp: "新闻资讯"
        },
        {
          ck: 3,
          qyp: "时尚服务"
        }
      ],
      qypp: [
        {
          ck: 1,
          img: require("../assets/cl1.png"),
          bt: "企业品牌",
          bts:
            "随石4G网络普及。各大小品牌都纷纷进驻移动互联网。而国内超过90%的推广公司都会通过移动端开发方式进行推广。手机网站就是能被随身携带和访问的微网站，能直接转发到微博和微信朋友圈，能直接在于机上观看并购买您的产品。"
        },
        {
          ck: 2,
          img: require("../assets/cl2.png"),
          bt: "新闻资讯",
          bts:
            "随石4G网络普及。各大小品牌都纷纷进驻移动互联网。而国内超过90%的推广公司都会通过移动端开发方式进行推广。手机网站就是能被随身携带和访问的微网站，能直接转发到微博和微信朋友圈，能直接在于机上观看并购买您的产品。"
        },
        {
          ck: 3,
          img: require("../assets/cl3.png"),
          bt: "时尚服务",
          bts:
            "随石4G网络普及。各大小品牌都纷纷进驻移动互联网。而国内超过90%的推广公司都会通过移动端开发方式进行推广。手机网站就是能被随身携带和访问的微网站，能直接转发到微博和微信朋友圈，能直接在于机上观看并购买您的产品。"
        }
      ]
    };
  },
  methods: {
    dianji(ck) {
      this.ck = ck;
    //   console.log(ck)
    }
  }
};
</script>